import React from 'react'
import { Layout} from 'antd';
import Table from '../Table'
import Editor from "../Editor"
import {useSelector,useDispatch,connect} from 'react-redux'
import "./tr.css"

const {Content} = Layout;

const Word = () => {
  const wordList = useSelector(state=> state.word.wordList)
  const valueList = useSelector(state=> state.value.valueList)
  const dispatch = useDispatch()
  let value;
  
  const columns = [
    {
        title: 'id',
        key: 'id',
        dataIndex: 'id',
        valueType: 'text',
    },
    {
      title: '单词',
      key: 'englishWord',
      dataIndex: 'englishWord',
      valueType: 'text'
    },
    {
        title: '音标',
        dataIndex: 'pa',
        key: 'pa',
        valueType: 'text'
    },
    {
      title: '汉语',
      key: 'chineseWord',
      dataIndex: 'chineseWord',
      valueType: 'text',
      ellipsis:true
    },
    {
      title: '英语例句1',
      key: 'englishInstance1',
      dataIndex: 'englishInstance1',
      valueType: 'text',
      ellipsis:true
    },
    {
      title: '汉语例句1',
      key: 'chineseInstance1',
      dataIndex: 'chineseInstance1',
      valueType: 'text',
      ellipsis:true
    },
    {
        title: '英语例句2',
        key: 'englishInstance2',
        dataIndex: 'englishInstance2',
        valueType: 'text',
        ellipsis:true
      },
      {
        title: '汉语例句2',
        key: 'chineseInstance2',
        dataIndex: 'chineseInstance2',
        valueType: 'text',
        ellipsis:true
      },
    {
      title: '收藏',
      key: 'collect',
      dataIndex: 'collect',
      valueType: 'text'
    },
    {
      title: '读音',
      key: 'pron',
      dataIndex: 'pron',
      valueType: 'text',
      ellipsis:true
    },
    {
        title: '操作',
        key: 'option',
        width: 120,
        valueType: 'option',
        render: (text,record,index,action) => [<div onClick={()=>{
          dispatch({type:'get',con:record});console.log(valueList)
        }}><Editor ques={user} url="http://101.34.58.111:8081/word"/></div>
        , <a onClick={async ()=>{
          console.log(record)
          await fetch(`http://101.34.58.111:8081/word/${record.id}`,{
          method:'delete',
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
          // body:JSON.stringify(record)
        })
        dispatch({type:'delete',content:['delete']})
        }}>删除</a>]
      }];
  const right = {}

  const user = [
    {name:'id',label:'id',tooltip:'最长为24位',placeholder:'请输入id'},
    {name:'englishWord',label:'单词',tooltip:'最长为24位',placeholder:'请输入单词'},
    {name:'pa',label:'音标',tooltip:'最长为24位',placeholder:'请输入音标'},
    {name:'chineseWord',label:'汉语',tooltip:'最长为24位',placeholder:'请输入汉语'},
    {name:'englishInstance1',label:'英语例句1',tooltip:'最长为24位',placeholder:'请输入英语例句1'},
    {name:'chineseInstance1',label:'汉语例句1',tooltip:'最长为24位',placeholder:'请输入汉语例句1'},
    {name:'englishInstance2',label:'英语例句2',tooltip:'最长为24位',placeholder:'请输入英语例句2'},
    {name:'chineseInstance2',label:'汉语例句2',tooltip:'最长为24位',placeholder:'请输入汉语例句2'},
    {name:'collect',label:'收藏',tooltip:'最长为24位',placeholder:'请输入收藏'},
    {name:'pron',label:'读音',tooltip:'最长为24位',placeholder:'请输入读音'},
]

    return (
        <Content className="site-layout-background" style={{paddingLeft: 10,margin: 0,minHeight: 280,}}>
          <Table title="单词管理" columns={columns} right={right} url="http://101.34.58.111:8081/word" ques={user} />
        </Content>
    )
}

export default connect()(Word)